<template>
	<div>
		<!-- 用户头像，昵称 -->
		<div v-if="userInfo && userInfo.id > 0" class="userBox" @tap="goUserInfo">
			<image v-if="userInfo && userInfo.avatar" :src="userInfo.avatar" class="userAvatar"></image>
			<image v-else src="@/static/img/userAvatar.png" class="userAvatar"></image>
			<div style="line-height: 150rpx; margin-left:20rpx;">{{ userInfo.name }}</div>
		</div>
		<div v-else class="userBox" @tap="goLogin()">
			<image v-if="userInfo && userInfo.avatar" :src="userInfo.avatar" class="userAvatar"></image>
			<image v-else src="@/static/img/userAvatar.png" class="userAvatar"></image>
			<div style="line-height: 150rpx; margin-left:20rpx;">去登录</div>
		</div>
		<div style="padding:15rpx;">
			<div style="display:grid; grid-template-columns:repeat(5, 145rpx); text-align:center">
				<div @tap="goUserInfo()">
					<image style="width: 100rpx; height: 100rpx;" src="@/static/img/5.png" mode=""></image>
					<div>个人信息</div>
				</div>
				<div @tap="goRelation()">
					<image style="width: 100rpx; height: 100rpx;" src="@/static/img/mobile.png" mode=""></image>
					<div>联系我们</div>
				</div>
			</div>
		</div>
		<!-- 开发时显示demo -->
		<div v-if="$config.env == 'dev'">
			<navigator url="../demo/menuDemo"><button>联动菜单demo</button></navigator>
			<navigator url="../demo/slideDemo"><button>左右滑动事件demo</button></navigator>
		</div>
		<!-- 最底部脚注 -->
		<div style="position:absolute; bottom:0; width:100%; text-align:center; font-size:30rpx; color:#aaa;">@chenyaru
			dev</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				userInfo: {
					id: 0,
					username: "",
					name: "",
					avatar: "",
				},
			};
		},
		onShow() {
			this.userInfo = uni.getStorageSync("userInfo")
		},
		// 微信小程序分享功能
		onShareAppMessage() {
			return {
				title: '商品列表',
				path: '/pages/goods/goodsList'
			}
		},
		methods: {
			goLogin() {
				uni.navigateTo({
					url: "/pages/login"
				})
			},
			goUserInfo() {
				uni.navigateTo({
					url: '/pages/userCenter/userInfo'
				});
			},
			goRelation() {
				uni.navigateTo({
					url: '/pages/userCenter/relation'
				});
			},
		}
	};
</script>

<style>
	.userBox {
		display: flex;
		height: 150rpx;
		padding-top: 30rpx;
		padding-left: 10rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 0 10rpx #cfcfcf;
	}

	.userAvatar {
		width: 130rpx;
		height: 130rpx;
		margin: 10rpx 20rpx;
		border-radius: 50%;
		box-shadow: 0 0 30rpx #cfcfcf;
	}

	.process {}
</style>
